<template>
	<div>
		<el-row>
			<el-col 
			:span="8" 
			v-for="(item, index) in dataList.data" 
			:key="index" 
			class="myCard"
			>
				<el-card 
				:body-style="{ padding: '0px'}" 
				shadow="hover"
				>
					
				<!-- 文章 -->	
					<div class="zt-imgs" v-if="dataList.type === 'wz'">
						<img :src="item.imgUrl" class="image">
					</div>
				<!-- 视频 -->
					<div class="zt-imgs" v-else>
						<div 
						class="circle" 
						title="播放视频"
						@click='choldClickItem(item,index)'
						>
							<div class="circle_inner_play"></div>
						</div>
						<div class="bg"></div>
						<!-- <div class="bg-L-top"></div>
						<div class="bg-R-botom"></div>
						<div class="bg-R-top"></div>
						<div class="bg-L-botom"></div> -->
						<img :src="item.imgUrl" class="image">
					</div>
					<div style="padding: 5px;text-align: left;">
						<span 
						class="title"
						@click='choldClickItem(item,index)'
						>{{ item.title }}</span>
						<div class="bottom clearfix">
							<time class="time">{{ item.date }}</time>
							<div 
							ref="btn" 
							:class="['button']" 
							style="color: blue" 
							title="收藏" 
							:index="index"
							 @click="collect(item,index,dataList.type)">
								<i class="el-icon-star-off"></i>
								收藏
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<div class="block" style="margin-top: 5px;float: right;">
			<el-pagination 
			@current-change="handleCurrentChange" 
			layout="total, prev, pager, next, jumper" 
			:total="allList"
			 :page-size="12" 
			 :small="true">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props:['dataList','allList'], // 所有数据   总共条数
		created() {
			
		},
		mounted() {
			//初始化页面
			// this.$emit('pagination',0)
		},
		methods: {
			/**
			 * @param {Number} val
			 * 请求下一页
			 */
			handleCurrentChange(val) {
				//返回页码
				this.$emit('pagination',val)
			},
			//收藏
			collect(item,index,type) {
				console.log(item,type);
				let allBtn = this.$refs.btn;
				if ((allBtn[index].getAttribute('style')).indexOf('red') !== -1) {
					allBtn[index].style.color = "blue";
					this.$message.closeAll()
					this.$message({
						message: '你已经取消收藏',
						center: true,
						offset: 200,
						duration: 1000,
						type: 'error'
					});
				} else {
					allBtn[index].style.color = "red";
					this.$message.closeAll()
					this.$message({
						message: '你已经添加到我的收藏',
						center: true,
						offset: 200,
						duration: 1000,
						type: 'success'
					});
				}
			},
			//把当前点击的数据传给父组件
			choldClickItem(item,index){
				this.$emit('clickItem',item,index)
			}
		}
	}
</script>

<style>
	.myCard{
		user-select: none;
	}
	.title{
		cursor: pointer;
	}
	.title:hover{
		color: #4474BB;
	}
	.time {
		font-size: 13px;
		color: #999;
		float: left;
	}

	.bottom {
		margin-top: 5px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.image {
		width: 100%;
		display: block;

	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.el-col-8 {
		/* width: 191px; */
		position: relative;
		margin: 10px;
		width: 15%;
	}

	.zt-imgs {
		position: relative;
	}

	/* 
	 播放哪里的特效
	 */
	/**
	 * 四周向中间扩散
	.bg-R-botom,.bg-R-top,.bg-L-top,.bg-L-botom{
		width: 10%;
		height: 10%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		transform: auto;
		transition: all 0.5s;
		background: rgba(0,0,0,0.5);	
	}
	 .bg-R-botom{
		right: 0;
		bottom: 0;
	}
	.bg-R-top{
		right: 0;
		top: 0;
	}
	.bg-L-top{
		top: 0;
		left: 0;
	}
	.bg-L-botom{
		left: 0;
		bottom: 0;
	}
	.myCard:hover .bg-L-top{
		width: 50%;
		height: 50%;
		background: rgba(0,0,0,0.5);	
	}
	.myCard:hover .bg-R-botom{
		width: 50%;
		height: 50%;
		background: rgba(0,0,0,0.5);	
	}
	.myCard:hover .bg-L-botom{
		width: 50%;
		height: 50%;
		background: rgba(0,0,0,0.5);	
	}
	.myCard:hover .bg-R-top{
			width: 50%;
			height: 50%;
			background: rgba(0,0,0,0.5);	
		} */

/**
 * 中间向两边
 */
	.bg {
		width: 10%;
		height: 10%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		transform: auto;
		transition: all 0.5s;
	}

	.myCard:hover .bg {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

	/**
		 * 播放按钮
		 */
	.myCard:hover .circle {
		height: 60px;
		width: 60px;
		border: solid 1px #FFFFFF;
	}

	.myCard:hover .circle_inner_play {
		border-width: 20px 0 20px 30px;
	}

	.circle {
		transform: auto;
		transition: all 0.5s;
		position: absolute;
		z-index: 999;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		height: 0;
		width: 0;
	}

	.circle_inner_play {
		transform: auto;
		transition: all 0.5s;
		position: absolute;
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0px 0 0px 0px;
		border-color: transparent transparent transparent #FFFFFF;
		position: absolute;
		top: 50%;
		left: 60%;
		transform: translate(-50%, -50%);
	}
</style>
